import React, { FC, useEffect, useState, useRef } from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import { isMobile } from '@/utils/env'
import iconSelected from '@/assets/images/icon_selected.png'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
])

const Improve: FC<{}> = () => {
  const [loading, setLoading] = useState<boolean>(false)
  const [widthVal, setWidthVal] = useState(0)
  const [undertake, setUndertake] = useState<boolean>(true)
  const chartRef = useRef(null)
  const chartRefPie = useRef(null)
  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    setWidthVal(document.body.clientWidth)
    // 页面变化时获取浏览器窗口的大小
    const resizeUpdate = () => {
      setWidthVal(document.body.clientWidth)
    }
    window.addEventListener('resize', resizeUpdate)
    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate)
    }
  }, [])
  useEffect(() => {
    if (undertake) {
      return
    }
    if (widthVal > 0) {
      if (isMobile()) {
        if (
          window.orientation &&
          (window.orientation === 90 || window.orientation === -90) &&
          widthVal > 560
        ) {
          setCharts(1)
        } else {
          setCharts(widthVal / 375)
        }
      } else {
        if (widthVal > 750) {
          setCharts(1)
        } else {
          setCharts(widthVal / 375)
        }
      }
    }
  }, [widthVal, undertake])
  const setCharts = (sizeNum: number) => {
    const myChart = echarts.init(chartRef.current as unknown as HTMLDivElement, undefined)
    myChart.clear()
    const data = [90, 100, 80, 80, 80, 80]
    const dataMax = [110, 150, 120, 110, 130, 140]
    const option = {
      grid: {
        top: '0',
        left: '0px',
        right: '0',
        bottom: '0px',
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          fontSize: sizeNum * 11,
          color: '#999999',
          lineHeight: sizeNum * 16,
          margin: sizeNum * 6,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        max: 160,
        splitNumber: 8,
      },
      yAxis: [
        {
          data: ['语文', '数学', '英语', '物理', '化学', '生物'],
          axisLabel: {
            fontSize: sizeNum * 11,
            color: '#333333',
            lineHeight: sizeNum * 11,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        {
          data: dataMax,
          axisLabel: {
            fontSize: sizeNum * 11,
            color: '#333333',
            lineHeight: sizeNum * 11,
            formatter: function (params: string) {
              return params + '分'
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: sizeNum * 15,
          zlevel: 3,
          data: data,
          label: {
            show: false,
          },
          itemStyle: {
            borderRadius: [0, sizeNum * 15, sizeNum * 15, 0],
            color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: 'rgba(255, 255, 255, 0.5)' },
              { offset: 0.8, color: 'rgba(255, 255, 255, 0.1)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' },
            ]),
          },
        },
        {
          type: 'bar',
          barWidth: sizeNum * 15,
          zlevel: 2,
          data: data,
          label: {
            show: true,
            position: 'inside',
            align: 'center',
            formatter: function (params: any) {
              return params.data + '分'
            },
            color: '#ffffff',
            fontSize: sizeNum * 11,
            fontWeight: 400,
          },
          itemStyle: {
            borderRadius: [0, sizeNum * 15, sizeNum * 15, 0],
            // color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            //   { offset: 0, color: '#FF7065' },
            //   { offset: 1, color: '#FE5245' },
            // ]),
            color: function (params: any) {
              // 给出颜色组
              const colorList1 = ['#44E1A7', '#44D7E1', '#FE9925', '#836DFC', '#82A5FD', '#FF7065']
              const colorList2 = ['#33C28E', '#33C2B8', '#FF8800', '#836DFC', '#5383F6', '#FE5245']
              //循环调用
              return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: colorList1[params.dataIndex % colorList1.length] },
                { offset: 1, color: colorList2[params.dataIndex % colorList2.length] },
              ])
            },
          },
        },
        {
          type: 'bar',
          barWidth: sizeNum * 15,
          barGap: '-100%',
          data: dataMax,
          label: {
            show: false,
          },
          itemStyle: {
            borderRadius: [0, sizeNum * 15, sizeNum * 15, 0],
            color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: '#FFFFFF' },
              { offset: 1, color: '#EEEEEE' },
            ]),
          },
        },
      ],
    }
    option && myChart.setOption(option)
    myChart.resize()

    const myChartPie = echarts.init(chartRefPie.current as unknown as HTMLDivElement, undefined)
    myChartPie.clear()
    const pieOption = {
      series: [
        {
          type: 'pie',
          silent: true,
          radius: ['30%', '63%'],
          center: ['50%', '50%'],
          itemStyle: {
            color: 'transparent',
          },
          label: {
            minMargin: sizeNum * 5,
            fontSize: sizeNum * 12,
            fontFamily: 'PingFangSC-Medium',
            fontWeight: 400,
          },
          labelLine: {
            show: false,
            length: sizeNum * 12,
            length2: 0,
            maxSurfaceAngle: 80,
          },
          data: [
            { value: 60, name: '数学' },
            { value: 20, name: '化学' },
            { value: 20, name: '物理' },
            { value: 40, name: '语文' },
          ],
        },
        {
          type: 'pie',
          silent: true,
          zlevel: 3,
          radius: ['30%', '63%'],
          center: ['50%', '50%'],
          itemStyle: {
            color: (params: any) => {
              const colorList = ['#FF3627', '#FF7166', '#FF9F99', '#FF9F99']
              return colorList[params.dataIndex]
            },
            borderRadius: sizeNum * 2,
            borderColor: '#fff',
            borderWidth: sizeNum * 2,
          },
          label: {
            position: 'inner',
            color: '#ffffff',
            fontSize: sizeNum * 12,
            fontFamily: 'PingFangSC-Medium',
            fontWeight: 400,
            formatter: function (params: any) {
              return params.data.value + '分'
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 60, name: '60' },
            { value: 20, name: '20' },
            { value: 20, name: '20' },
            { value: 40, name: '40' },
          ],
        },
        {
          type: 'pie',
          silent: true,
          zlevel: 4,
          radius: ['0%', '30%'],
          center: ['50%', '50%'],
          itemStyle: {
            color: 'transparent',
          },
          label: {
            position: 'center',
            formatter: function (params: any) {
              return '{a|' + String(params.data.value) + '}' + '{b|' + '分' + '}'
            },
            lineHeight: sizeNum * 32,
            color: '#333333',
            rich: {
              a: {
                fontSize: sizeNum * 30,
                fontFamily: 'PingFangSC-Medium',
                fontWeight: 400,
              },
              b: {
                fontSize: sizeNum * 16,
                fontFamily: 'PingFangSC-Medium',
                fontWeight: 400,
                padding: [sizeNum * 9, 0, 0, 0],
              },
            },
          },
          labelLine: {
            show: false,
          },
          data: [{ value: 70 }],
        },
      ],
    }
    pieOption && myChartPie.setOption(pieOption)
    myChartPie.resize()
  }
  return (
    <div className="w-full bg-gray-F7F7F8 px-r1.6 pt-r17.5 pb-r4.4">
      {!undertake ? (
        <>
          <div className="bg-white rounded-r1.0 px-r1.6 py-r2.4 mb-r1.2">
            <div className="text-gray-333333 font-medium-family font-medium text-r1.8 leading-r1.8 mb-r1.2">
              你的总提分空间：<span className="text-orange-FF3627">90分</span>
            </div>
            <div className="text-gray-666666 text-r1.3 leading-r1.3 font-regular mb-r2.4">
              各科当前分数与目标分数
            </div>
            <div>
              <div className="h-r23.2 -mt-r1.0" ref={chartRef}></div>
            </div>
          </div>
          <div className="bg-white rounded-r1.0 px-r1.6 py-r2.4">
            <div className="text-gray-333333 font-medium-family font-medium text-r1.8 leading-r1.8 mb-r1.2">
              主攻<span className="text-orange-FF3627">科目</span>推荐：
            </div>
            <div className="text-gray-666666 text-r1.3 leading-r1.3 font-regular">
              <div className="text-gray-333333 mb-r1.2">
                当前阶段建议你将学习经历主要集中于4个学
              </div>
              <div className="flex justify-between mb-r1.2 rounded-r0.8 bg-gray-F7F7F8 py-r1.6 px-r2.4">
                <div className="flex items-center text-gray-333333 font-medium-family font-medium text-r1.2 leading-r1.2">
                  <img src={iconSelected} alt="" className="w-r1.6 h-r1.6 mr-r0.4" />
                  语文
                </div>
                <div className="flex items-center text-gray-333333 font-medium-family font-medium text-r1.2 leading-r1.2">
                  <img src={iconSelected} alt="" className="w-r1.6 h-r1.6 mr-r0.4" />
                  数学
                </div>
                <div className="flex items-center text-gray-333333 font-medium-family font-medium text-r1.2 leading-r1.2">
                  <img src={iconSelected} alt="" className="w-r1.6 h-r1.6 mr-r0.4" />
                  物理
                </div>
                <div className="flex items-center text-gray-333333 font-medium-family font-medium text-r1.2 leading-r1.2">
                  <img src={iconSelected} alt="" className="w-r1.6 h-r1.6 mr-r0.4" />
                  化学
                </div>
              </div>
              <div>
                突破薄弱板块，预计可实现提分
                <span className="text-orange-FF3627 text-r1.8 leading-r1.8">70分</span>
              </div>
            </div>
            <div>
              <div className="h-r23.2 -mt-r1.0" ref={chartRefPie}></div>
            </div>
          </div>
        </>
      ) : (
        <>121</>
      )}
    </div>
  )
}

export default Improve
